// 动画添加数字dom
const appendComs = (dom, length) => {
  let child = document.createElement('ul')
  child.className = 'num-box-ul'
  for (let i = 0; i < length; i++) {
    let li = document.createElement('li')
    li.className = 'num-box-li'
    li.innerHTML = i
    child.appendChild(li)
  }
  dom.appendChild(child)
}
// 获取当前时间数组
function getTimeList () {
  let hour = new Date().getHours() + ''
  let minu = new Date().getMinutes() + ''
  let seco = new Date().getSeconds() + ''
  let hours = hour < 10 ? `0,${hour}` : hour.split('').join(',')
  let minus = minu < 10 ? `0,${minu}` : minu.split('').join(',')
  let secos = seco < 10 ? `0,${seco}` : seco.split('').join(',')
  let time = `${hours},${minus},${secos}`
  let list = time.split(',')
  return list.map(item => Number(item))
}
// 时间切换
function timeChange () {
  let doms = document.getElementsByClassName('num-box-ul')
  let nowTimes = document.getElementsByClassName('now-time')
  let list = getTimeList()
  for (let i = 0; i < list.length; i++) {
    const element = list[i];
    nowTimes[i].innerHTML = element
    let oldIndex = parseInt(element) * 50
    doms[i].style.top = `-${oldIndex}px`
  }
}
// 初始化
const init = () => {
  const hour1 = document.getElementById('hour-1'),
    hour2 = document.getElementById('hour-2'),
    minu1 = document.getElementById('minu-1'),
    minu2 = document.getElementById('minu-2'),
    seco1 = document.getElementById('seco-1'),
    seco2 = document.getElementById('seco-2')

  const hour1Length = 3, hour2Length = 10, minu1Length = 6, minu2Length = 10, seco1Length = 6, seco2Length = 10
  appendComs(hour1, hour1Length)
  appendComs(hour2, hour2Length)
  appendComs(minu1, minu1Length)
  appendComs(minu2, minu2Length)
  appendComs(seco1, seco1Length)
  appendComs(seco2, seco2Length)

  timeChange()
  setInterval(() => {
    timeChange()
  }, 1000)
}
init();